import React, { useState } from 'react';
import { Card, List, Tag, Button, Pagination, Space, Tooltip } from 'antd';
import { StarOutlined, ShareAltOutlined, FireOutlined, ClockCircleOutlined } from '@ant-design/icons';

const articles = [
  {
    id: 1,
    title: 'GPT-5发布：能力大幅提升，应用场景拓展',
    summary: 'OpenAI正式发布GPT-5，模型能力和推理速度大幅提升，支持更多行业应用...',
    tags: ['大模型', 'OpenAI'],
    hot: true,
    time: '2小时前',
    collected: false
  },
  {
    id: 2,
    title: '国产大模型"悟道3.0"亮相，性能对标GPT-4',
    summary: '中国科学院发布"悟道3.0"大模型，参数量和推理能力均大幅提升...',
    tags: ['大模型', '国产'],
    hot: false,
    time: '5小时前',
    collected: true
  },
  {
    id: 3,
    title: 'Meta推出多模态AI模型，支持文本、图像、音频',
    summary: 'Meta发布新一代多模态AI模型，推动AI理解和生成能力再升级...',
    tags: ['多模态', 'Meta'],
    hot: true,
    time: '1天前',
    collected: false
  }
];

const ArticleList: React.FC = () => {
  const [page, setPage] = useState(1);
  return (
    <Card style={{ background: '#232733', color: '#fff' }} bordered={false}>
      <List
        itemLayout="vertical"
        dataSource={articles}
        renderItem={item => (
          <List.Item style={{ borderBottom: '1px solid #2c2f36', padding: '24px 0' }}>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <h3 style={{ color: '#fff', marginBottom: 0 }}>{item.title}</h3>
                {item.hot && <Tag color="red" icon={<FireOutlined />}>热门</Tag>}
                <span style={{ color: '#aaa', marginLeft: 16 }}><ClockCircleOutlined /> {item.time}</span>
              </div>
              <div style={{ color: '#bbb', margin: '8px 0 12px 0' }}>{item.summary}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  {item.tags.map(tag => <Tag key={tag} color="blue">{tag}</Tag>)}
                </div>
                <Space>
                  <Tooltip title={item.collected ? '已收藏' : '收藏'}>
                    <Button type={item.collected ? 'primary' : 'default'} shape="circle" icon={<StarOutlined />} />
                  </Tooltip>
                  <Tooltip title="分享">
                    <Button shape="circle" icon={<ShareAltOutlined />} />
                  </Tooltip>
                </Space>
              </div>
            </div>
          </List.Item>
        )}
      />
      <div style={{ textAlign: 'right', marginTop: 16 }}>
        <Pagination current={page} total={30} pageSize={5} onChange={setPage} showSizeChanger={false} />
      </div>
    </Card>
  );
};

export default ArticleList; 